<template>
  <view>
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="提现记录" />
    </view>
    <view>
      <scroll-view scroll-y="true" @scrolltolower="fetchMore" class="scroll-Y">
        <block v-for="(item,index) in recorderList" :key="index">
          <view class="box">
            <view class="box-top">
              <text style="color: #7f7f7f;">交易编号：</text>
              <text>{{item.orderNum}}</text>
            </view>
            <view class="empty"></view>
            <view class="record">提现记录</view>
            <view class="sum">提现金额： <text class="money">￥{{item.money}}</text></view>
             <view class="payaccount">卡号： <text class="num" >{{item.payAccount}}</text></view>
            <view class="time"><uni-dateformat :date="item.createTime" format="yyyy-mm-dd hh:mm:ss"></uni-dateformat>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
    <uni-load-more :status="loadStatue" iconType="circle" color="#22b9a3" />
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    showToastAndDo
  } from '@/utils/toast.js'
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const staffinfo = ref({})
  const recorderList = ref([])
  const param = {
    staffId: null,
    pageNo: 1,
    pageSize: 10
  }
  const loadStatue = ref('more')
  onLoad(async () => {
    staffinfo.value = uni.getStorageSync("staffInfo");
    param.staffId = staffinfo.value.id
    queryRecoder(param)
  })
  //监听滚动栏
  function fetchMore() {
    //当nomore时，不再发送请求
    if (loadStatue.value == 'noMore') {
      return
    }
    param.pageNo = param.pageNo + 1,
     queryRecoder(param)
  }
  //导航返回
  function goback() {
    uni.navigateBack()
  }
  async function queryRecoder(param) {
    loadStatue.value = 'loading'
    const result = await http.getRequest("/peizhen/withdraw/page", param)
    if (result.code == 0) {
      //当数量小于pagesize时说明没有了
      if (result.data.list.length < param.pageSize) {
        loadStatue.value = 'noMore'
      } else {
        loadStatue.value = 'more'
      }
      recorderList.value = recorderList.value.concat(result.data.list)
    } else {
      uni.showToast({
        title: '查询提现记录失败',
        icon: 'error',
        duration: 1000
      })
    }
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .box {
    width: 690rpx;
    height: 400rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    margin: 30rpx auto;
    border-radius: 20rpx;

    .box-top {
      height: 98rpx;
      line-height: 98rpx;
      margin-left: 30rpx;
      font-size: 28rpx;
    }

    .empty {
      width: 630rpx;
      height: 2rpx;
      background: #eeedf0;
      margin: 0 auto;
    }

    .record {
      font-weight: bold;
      font-size: 32rpx;
      color: #3f3f3f;
      margin: 30rpx 0 0 30rpx;
    }

    .sum {
      margin: 20rpx 0 0 30rpx;
      font-size: 28rpx;
      color: #8a8a8a;

      .money {
        color: #ff0b17;
      }
    }
    .payaccount{
     margin: 20rpx 0 0 30rpx;
     font-size: 28rpx;
     color: #8a8a8a;
     .num {
      font-size: 35rpx;
     }
    }
    .time {
      font-size: 28rpx;
      margin: 40rpx 0 0 30rpx;
      color: #c0c0c0;
    }
  }
  .scroll-Y {
    height: 100vh;
  }
</style>